<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能仪表检测识别平台</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        th,
        td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }

        th {
            background-color: #4CAF50;
            color: white;
        }

        tr:nth-child(even) {
            background-color: #f2f2f2;
        }

        img {
            max-width: 275px;
            max-height: 250px;
        }
    </style>
</head>

<body>
<h1>智能仪表检测识别平台</h1>
<button class="upload-button" onclick="getIndex()">返回</button>

<table id="dataTable">
    <thead>
    <tr>
        <th>设备编号</th>
        <th>站点</th>
        <th>上传时间</th>
        <th>上传图片</th>
        <th>检测图片</th>
    </tr>
    </thead>
    <tbody id="dataList">
    <!-- 这里将由后端数据填充 -->
    </tbody>
</table>
<script>
    // 页面加载时发送 POST 请求获取数据
    window.onload = function () {
        fetch('http://3yumjv.natappfree.cc/main/data', {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json'
            }
        })
            .then(response => response.json())
            .then(data => {
                const tableBody = document.getElementById('dataTable').getElementsByTagName('tbody')[0];
                data.data.forEach(item => {
                    const imageBasePath = '../static/images/';
                    const row = document.createElement('tr');
                    row.innerHTML = `
                    <td>${item.deviceId}</td>
                    <td>${item.stationName}</td>
                    <td>${item.createTime}</td>
                    <td><div><img border="0" src="${imageBasePath}${item.pictureUri}" alt="upload picture" width="240" height="150"></div></td>
                    <td><div><img border="0" src="${imageBasePath}${item.displayPictureUri}" alt="detection picture" width="240" height="150"></div></td>
                `;
                    tableBody.appendChild(row);
                });
            })
            .catch(error => console.error('Error fetching data:', error));
    }
    function getIndex(){
        window.location.href = "http://3yumjv.natappfree.cc";
    }
</script>
</body>

</html>